<template>
    <div id="crud-form">
        <el-card shadow="hover">
            <div class="crud-detail-header">
                <div class="header">{{VueTag "{{"}} crud.dialog.title {{VueTag "}}"}}</div>
                <CrudAddOperation ref="formHeader" :form-props="formProps" :item-props="itemProps" @submit="submit"/>
            </div>
        </el-card>
        <div class="form-detail">
            <el-card shadow="hover">
                <div slot="header" class="clearfix">
                    {{VueTag "{{"}} crud.dialog.title {{VueTag "}}"}}
                </div>
                <CrudForm v-if="crud.formStatus !== 3" ref="crudForm" :form-props="formProps" :item-props="itemProps"/>
                <crud-details v-else :item-props="itemProps"/>
            </el-card>
            <el-backtop target="#crud-form"/>
        </div>
    </div>
</template>
<script>
    import CrudForm from '@CRUD-Components/form';
    import formOptions from './options'
    import CrudAgGrid from '@CRUD-Components/AgGrid';
    import CrudAddOperation from '@CRUD-Components/DetailPages/Header_operation';
    import childTableOperation from '@CRUD-Components/DetailPages/child_table_operation';
    import {form} from '@CRUD/index';
    import {getTableFiled} from './structure';
    export default {
        components: {
            CrudForm,
            CrudAgGrid,
            CrudAddOperation,
            childTableOperation
        },
        mixins: [form(getTableFiled('defaultForm'))],
    }
</script>